<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="第一个数字">
    <input type="text" placeholder="运算符">
    <input type="text" placeholder="第二个数字">
    <input type="text" value="=" disabled>
    <input type="text" placeholder="显示结果">
    <input type="button" value="计算">
    <ul>

        <!-- <li>1</li>
        <li>5</li> -->
    </ul>
    <script>
        // 1。获取元素
        var oInput = document.querySelectorAll('input');
        // 2、加事件
        oInput[5].onclick = function(){
            // 3、做什么事 ---
                // 3.1 获取用户输入的属性 ----字符串
                var num1 = parseFloat(oInput[0].value);
                var num2 = parseFloat(oInput[2].value);
                var f = oInput[1].value;
                var j;

                // 多分支判断
                switch(f){
                    case "+" : j = num1 + num2 ; break;
                    case "-" : j = num1 - num2 ; break;
                    case "*" : j = num1 * num2 ; break;
                    case "/" : j = num1 / num2 ; break;
                    default:console.log("不支持该计算");
                }

                // 设置结果
                oInput[4].value = j;

        }


    </script>



    <script>
        /* 
        流程控制：
            顺序结构： 代码从上往下执行
            选择结构：分支语句  if   if-else  switch
            循环结构：while  do-while for  for-in 
        
        分支语句:
            单分支：
                语法：if(条件判断){条件成立执行的代码}
            双分支：
                语法：if(条件){条件成立执行的代码}else{条件不成立执行的代码}
            多分支：
                语法：
                    if(条件1){
                        条件1成立执行的代码
                    }else if(条件2){
                        条件2成立执行的代码
                    }else if...

                switch:
                    switch(匹配项){
                        case 情况1 ：匹配到情况1执行的代码； break;
                        case 情况2 ：匹配到情况2执行的代码； break;
                        ...
                        default:都匹配不到执行的代码；
                    }
        */
    //    计算器：








       var m = 699;

        if(m>=500){
            console.log("躺平");
        }else if(m>400){
            console.log("躺平一点点");
        }else if(m>200){
            console.log("躺平一小时");
        }else{
            console.log("加油干！！！！");
        }


        if(m>=500){
            console.log("躺平");
        }

        if(m>400 && m<=500){
            console.log("躺平一点点");
        }

        if(m>200){
            console.log("躺平一小时");
        }

        var c = 88;
        // 需要：拔河比赛成绩表   评委：0 100     90以上：优秀   80以上：良好   60以上及格  60一下：淘汰


        /* 
        循环语句：
            循环：让特定的代码执行指定的次数

            for循环：
                语法：
                    for(初始化循环变量 ;循环条件 ;更新循环变量){循环体};

            什么时候使用for循环：多次重复执行、多次执行有规律。
        
        */
        // 在控制台打印1-100数字
        for(var i=1;i<=100;i++){
            console.log(i);
        }
        /* 
        执行过程：
            1、初始化循环变量   i=1；
            2、判断循环条件   i<=100
                    成立： 执行循环体
                    不成立：结束循环
            3、执行循环体
            4、更新循环变量  i++ 
            5、回到步骤2

        */

        var arr = [1,5,8,3,5,7,0];
        // 循环生成标签

        // 1、获取元素
        var oUl = document.getElementsByTagName('ul')[0];

        for(var i=0;i<arr.length;i++){
            oUl.innerHTML += "<li>"+ arr[i]+ "</li>";
        }


        // li标签添加点击事件，点谁让谁背景变红
        // 1、获取元素
        var oLi = document.getElementsByTagName('li');
        
        // 2、加事件 --- 所有的li
        for(var j=0;j<oLi.length;j++){
            oLi[j].onclick = function(){
                // 3、做什么事 --- 点谁让谁背景变红 ---this
                this.style.backgroundColor = "red";
            }
        }
    </script>
</body>
</html>